<script>
export default {
  name: "station",
  props: {
    station: {
      type: Object,
      default: {}
    }
  },
  methods: {
    getOpenStatus() {
      let res = this.station
      let plotStatus = ''
      if (res.openingStart && res.openingEnd) {
        const [startHour, startMinute] = res.openingStart.split(':').map(Number);
        const [endHour, endMinute] = res.openingEnd.split(':').map(Number);
        const currentHour = new Date().getHours();
        const currentMinute = new Date().getMinutes();

        if ((currentHour > startHour || (currentHour === startHour && currentMinute >= startMinute)) &&
            (currentHour < endHour || (currentHour === endHour && currentMinute <= endMinute))) {
          plotStatus = 'OPEN'
        }
      }
      console.log('plotStatus',plotStatus)
      return plotStatus
    },
    toDetail() {
      if (this.getOpenStatus(this.station) !== 'OPEN') {
        uni.showToast({
          icon: 'none',
          title: '充电站暂停营业'
        })
        return
      }
      wx.navigateTo({
        url: `/pages/station/detail?stationId=${this.station.id}&distance=${this.formattedDistance}`
      });
    },
    toAddress() {
      // 去地图查看位置
      uni.openLocation({
        latitude: Number(this.station.lat),    // 纬度
        longitude: Number(this.station.lng),  // 经度
        name: this.station.plotName,           // 位置名称
        address: this.station.address,     // 详细地址
        scale: 18,                        // 地图缩放级别，范围 3-20，默认 18
        success: () => {
          console.log('打开地图成功')
        },
        fail: (err) => {
          console.log('打开地图失败：', err)
          uni.showToast({
            title: '打开地图失败',
            icon: 'none'
          })
        }
      })
    }
  },
  computed: {
    formattedPrice() {
      return Number(this.station.serviceMoney).toFixed(3)
    },
    formattedDistance() {
      // 米转换千米
      return (this.station.distance / 1000).toFixed(2)
    }
  }
}
</script>

<template>
  <div class="item">
    <div class="item-top" @click="toDetail">
      <image class="post-url" :src="station.filePath" alt=""/>
      <div class="desc">
        <div class="title">
          <div class="status-tag" v-if="getOpenStatus(station) === 'OPEN'">营业中</div>
          <div class="status-tag2" v-else>歇业中</div>
          <div class="name">{{ station.plotName }}</div>
          <div class="price">
            <span>{{ formattedPrice }}</span>
            <span class="unit">元/度</span>
          </div>
        </div>
        <div class="date">
          <span>{{ station.openingStart || '' }}</span>
          <span>至</span>
          <span>{{ station.openingEnd || '' }}</span>
        </div>
        <div class="type-list">
          <div class="type-item" v-if="station.occupiedFastCharger || station.fastChargerTotal">
            <div class="type-name">快</div>
            <div class="type-value">
              空闲{{ station.occupiedFastCharger || 0 }}/{{ station.fastChargerTotal || 0 }}
            </div>
          </div>
          <div class="type-item type-item2" v-if="station.occupiedSlowCharger || station.slowChargerTotal">
            <div class="type-name">慢</div>
            <div class="type-value">
              空闲{{ station.occupiedSlowCharger || 0 }}/{{ station.slowChargerTotal || 0 }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item-footer" @click="toAddress">
      <image class="location" src="/static/home/location.png" alt=""/>
      <span class="address">
            {{ station.address || ''}}
          </span>
      <div style="display: flex;align-items: center">
        <image class="location" src="/static/home/map.png" alt=""/>
        <span class="address">
              {{ formattedDistance }}公里
            </span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.item {
  margin: 0 30rpx;
  width: 690rpx;
  background: #FFFFFF;
  margin-bottom: 24rpx;
  border-radius: 24rpx;
  overflow: hidden;
  .item-footer {
    height: 66rpx;
    background: #04C8AE;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .location {
      width: 28rpx;
      height: 34rpx;
      flex-shrink: 0;
    }
    .address {
      flex-grow: 1;
      font-family: PingFangSC;
      font-size: 24rpx;
      font-weight: normal;
      color: #FFFFFF;
      margin-left: 12rpx;
      // 省略号
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .item-top {
    padding: 24rpx;
    display: flex;
    align-items: center;
    .post-url {
      width: 140rpx;
      height: 140rpx;
    }
    .desc {
      flex-grow: 1;
      margin-left: 24rpx;
      .title {
        display: flex;
        align-items: center;
        .status-tag {
          flex-shrink: 0;
          background: #5494FE;
          border-radius: 8rpx;
          padding: 2rpx 8rpx;
          color: #ffffff;
          font-size: 24rpx;
        }
        .status-tag2 {
          flex-shrink: 0;
          background: #acaba8;
          border-radius: 8rpx;
          padding: 2rpx 8rpx;
          color: #ffffff;
          font-size: 24rpx;
        }
        .name {
          flex-grow: 1;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          padding: 0 6rpx;
          // 溢出省略
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .price {
          flex-shrink: 0;
          font-family: DIN, DIN;
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .unit {
            height: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #333333;
            line-height: 24rpx;
            padding-left: 4rpx;
          }
        }
      }
      .date {
        font-family: PingFangSC;
        font-size: 24rpx;
        font-weight: normal;
        color: #9A9A9A;
        padding:12rpx 6rpx;
      }
      .type-list {
        display: flex;
        align-items: center;
        .type-item {
          border-radius: 8rpx;
          opacity: 1;
          box-sizing: border-box;
          border: 1rpx solid #5494FE;
          display: flex;
          align-items: center;
          margin-right: 20rpx;
          .type-name {
            font-family: PingFangSC;
            font-size: 20rpx;
            font-weight: normal;
            line-height: 40rpx;
            text-align: center;
            color: #FFFFFF;
            text-align: center;
            padding: 0 12rpx;
            background-color:#5494FE;
          }
          .type-value {
            padding: 0 16rpx;
            font-family: PingFangSC;
            font-size: 20rpx;
            font-weight: normal;
            line-height: 38rpx;
            text-align: center;
            color: #5494FE;
          }
        }
        .type-item2 {
          border-color: #FF8000;
          .type-name {
            background-color: #FF8000;
          }
          .type-value {
            color: #FF8000;
          }
        }
      }
    }
  }
}
</style>
